<template>
  <div class="main">
    <p class="cancle">取消</p>
    <h3>设置密码</h3>
    <div class="login">
      <input type="text" placeholder="请设置登录密码" />
      <input type="text" placeholder="请确定登录密码" />
      <p>密码由6-20位数字、字母、字符组成</p>
      <button>完成</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style lang="scss" scoped>
input::-ms-input-placeholder {
  text-align: center;
}

input::-webkit-input-placeholder {
  text-align: center;
}
.cancle {
  display: flex;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.3rem;
  color: red;
}
.main {
  text-align: center;
  h3 {
    font-size: 0.36rem;
    margin: 2.14rem 0 0.48rem 0;
  }

  .login {
    position: relative;
    input {
      box-sizing: border-box;
      width: 5.6rem;
      height: 1.1rem;
      font-size: 0.3rem;
      margin-top: 0.3rem;
      border: none;
      background-color: #f8f9fb;
      border-radius: 0.5rem;
      padding: 0 1rem;
    }
    p {
      font-size: 0.26rem;
      color: #999999;
    }
  }
  button {
    width: 5.4rem;
    height: 0.88rem;
    border-radius: 0.5rem;
    background-color: #efefef;
    color: #999999;
    border: none;
    font-size: 0.4rem;
  }
}
</style>
